import React, { Component } from 'react'
import { connect } from 'react-redux'
import Couter from '../../components/Couter';

class SagaPage extends Component {
  render() {
    const { dispatch } = this.props;
    const action = type => dispatch({type});
    return (
      <div>
      <h3>同步异步计数器- react-saga</h3>
      <Couter
        value={this.props.value}
        // 延迟1秒计数
        onIncrementAsync={() => action('INCREMENT_ASYNC1')}
        // 同步计数
        onIncrement={() => action('INCREMENT')}
        // 延迟2秒计数
        onDecrementAsync={() => action('DECREMENT_ASYNC1')}
        // 同步计数
        onDecrement={() => action('DECREMENT')}
      />
    </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    value: state.counter
  }
}

export default connect(
  mapStateToProps
)(SagaPage)
